<template>
	<view>
		<u-navbar title="我的交付" :fixed="true" :placeholder="true" :safeAreaInsetTop="true" :autoBack="false"
			leftIconColor="#666" titleStyle="color:#333" bgColor="#10191F" rightText="交付说明" @rightClick="right"
			@leftClick="leftClick"></u-navbar>
		<!-- 车辆信息 -->
		<view class="car_v">
			<!-- 标题 -->
			<view class="title_v">
				<image src="../../static/icon/i_car1.png" mode=""></image>
				<text>厂商指导价</text>
			</view>
			<!-- 售价 -->
			<view class="price_v">
				<text>{{ data.market_price }}</text>
			</view>
			<image class="carlogo" :src="data.car_logo" mode="aspectFit"></image>
			<image class="bg1" src="../../static/image/car_bg.png" mode="aspectFill"></image>
			<image class="bg2" :src="data.cover" data-url="/pagesMy/nationalCarPooling/carDetail" @click="allJump" mode="aspectFit"></image>
		</view>
		<!-- 拼车成功 -->
		<!-- member_status 状态0-拼车中；1-拼车完成；2-待开奖；3-待交付，4拼车失败，5未抽中；6完成-->
		<view class="carpool_v" >
			<text class="lab_title">恭喜</text>
			<text class="lab_conent">{{ conent }}</text>
			<text class="lab_phone" @click="phoneClick">{{ data.hotline }}</text>
		</view>
<!-- 		<view class="tiche_v" v-else-if ="data.member_status === 6">
			<text class="lab_title">恭喜，您已成功提车</text>
			<view class="btns_v">
				<view class="btn_v" v-for="(item,index) in serviceArr" :key="item.id">
					<image :src="item.icon" mode="aspectFit"></image>
					<text>{{item.name}}</text>
				</view>
			</view>
			<text class="lab_phone" @click="phoneClick" >车主服务热线 {{ data.hotline }}</text>
		</view> -->
		
		<!-- 规则说明 -->
		<!-- 提示框u-popup -->
		<u-popup :show="tipShow" mode="center" @close="tipShow = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="prompt_tit">{{ deliver_explain }}</text>
			</view>
		</u-popup>
			
	</view>
</template>

<script>
	import {
		superDeliveryCondition,
		carpoolingConfig
	} from "../../api/mycar.js"
	
	export default {
		data() {
			return {
				tipShow: false,
				conent: '您已拼车成功，并获得实车交付权，请与客服联系',
				serviceArr: [{
						id: 1,
						name: '车险',
						icon: '../../static/icon/car_delivery_1.png'
					},
					{
						id: 2,
						name: '修理',
						icon: '../../static/icon/car_delivery_2.png'
					},
					{
						id: 3,
						name: '保养',
						icon: '../../static/icon/car_delivery_3.png'
					},
					{
						id: 4,
						name: '美容',
						icon: '../../static/icon/car_delivery_4.png'
					},
					{
						id: 5,
						name: '代理',
						icon: '../../static/icon/car_delivery_5.png'
					},
					{
						id: 6,
						name: '加油',
						icon: '../../static/icon/car_delivery_6.png'
					},
					{
						id: 7,
						name: '卖车',
						icon: '../../static/icon/car_delivery_7.png'
					}
				],
				deliver_explain: '',
				data: {},
				ids:""
			}
		},
		onLoad(options) {
			this.ids=options.id
			// 获取详情数据
			this.getRequestData()
			// 获取配置信息
			this.getConfig()
		},
		methods: {
			goindex(){
				uni.switchTab({
					url:"/pages/index/index"
				})
			},
			//返回
			leftClick() {
				uni.navigateBack();
			},
			right() {
				this.tipShow = true
			},
			// 拨打佃户
			phoneClick() {
				window.location.href = 'tel://' + this.data.hotline
			},
			
			// 获取数据
			getRequestData() {
				superDeliveryCondition({
					carpool_card_id:this.ids
				}).then(res => {
					console.log(res)
					if (res.code == 1) {
						
						this.data = res.data;
						console.log(this.data)
					}
				})
			},
			allJump(e) {
				let {url} = e.currentTarget.dataset
				uni.navigateTo({
					url: url
				})
			},
			// 	配置信息
			getConfig() {
				carpoolingConfig().then(res => {
					console.log(res)
					if (res.code == 1) {
						this.deliver_explain = res.data.deliver_explain;
					}
				})
			}
		},
	}
</script>

<style>
	page {
		background-color: #10191F;
	}
</style>

<style lang="scss" scoped>
	@font-face {
		font-family: 'iconfont2';
		src: url("~@/iconfont/YouSheBiaoTiHei.ttf");
	}

	/deep/ .u-navbar__content__title {
		color: #fff !important;
	}

	/deep/.uicon-arrow-left {
		color: #fff !important;
	}

	/deep/ .u-navbar__content__right__text {
		color: #ffffff;
	}

	.car_v {
		position: relative;
		display: flex;
		flex-direction: column;
		margin-top: 26rpx;
		width: 750rpx;
		height: 546rpx;
		.carlogo{
			position: absolute;
			top: 40rpx;
			right: 50rpx;
			width: 80rpx;
			height: 60rpx;
		}
		.bg1 {
			position: absolute;
			top: -50rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 150%;
			height: 596rpx;
			z-index: 2;
		}

		.bg2 {
			position: absolute;
			top: 120rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 640rpx;
			height: 490rpx;
			z-index: 3;
		}

		.title_v {
			display: flex;
			// justify-content: center;
			align-items: center;
			width: 200rpx;
			height: 28rpx;
			margin-top: 40rpx;

			>image {
				width: 21.6rpx;
				height: 21.6rpx;
				margin-left: 30rpx;
			}

			>text {
				font-size: 28rpx;
				color: #fff;
				margin-left: 2rpx;
			}
		}

		.price_v {
			display: flex;
			// align-items: center;
			width: 90%;
			height: 54rpx;
			margin-top: 6rpx;
			margin-left: 30rpx;
			background-image: url("../../static/image/car1.png");
			background-size: 218rpx 34rpx;
			background-position: left 0% bottom 0%;
			background-repeat: no-repeat;

			>text {
				margin-left: 18rpx;
				line-height: 48rpx;
				font-family: iconfont2;
				font-size: 48rpx;
				color: #26A4F2;
				margin-top: 0rpx;
			}
		}
	}

	.carpool_v {
		display: flex;
		flex-direction: column;
		width: 690rpx;
		height: 464rpx;
		margin: 0 auto;
		margin-top: 0rpx;
		box-shadow: inset 0rpx 0rpx 30rpx 0rpx #1C85DB;

		>text {
			color: #fff;
			text-align: center;
		}

		.lab_title {
			line-height: 52rpx;
			margin: 0 auto;
			margin-top: 28rpx;
			font-size: 44rpx;
			font-family: iconfont2;
		}

		.lab_conent {
			width: 442rpx;
			margin: 0 auto;
			margin-top: 50rpx;
			font-size: 32rpx;
		}

		.lab_phone {
			line-height: 52rpx;
			margin: 0 auto;
			margin-top: 80rpx;
			font-size: 44rpx;
		}
	}

	.tiche_v {
		display: flex;
		flex-direction: column;
		width: 690rpx;
		height: 528rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		box-shadow: inset 0rpx 0rpx 30rpx 0rpx #1C85DB;

		>text {
			color: #fff;
			text-align: center;
		}

		.lab_title {
			line-height: 52rpx;
			margin: 0 auto;
			margin-top: 28rpx;
			font-size: 44rpx;
			font-family: iconfont2;
		}

		.btns_v {
			display: flex;
			// 自动换行
			flex-wrap: wrap;
			// 间隔
			// gap: 30rpx;
			width: 690rpx - 66rpx;
			height: 288rpx;
			margin: 0 auto;
			margin-top: 42rpx;

			.btn_v {
				display: flex;
				flex-direction: column;
				justify-content: center;
				width: 20%;
				height: 50%;

				>image {
					width: 118rpx;
					height: 118rpx;
					margin: 0 auto;
				}

				>text {
					line-height: 52rpx;
					font-size: 28rpx;
					color: #fff;
					margin: 0 auto;
					margin-top: -20rpx;
				}
			}
		}

		.lab_phone {
			line-height: 52rpx;
			margin: 0 auto;
			margin-top: 36rpx;
			font-size: 44rpx;
			// font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
		}
	}
	.prompt {
		position: relative;
		width: 656rpx;
		min-height: 568rpx;
		background: #111B23;
		margin: 0 auto;
		color: #111B23;
		padding-top: 30rpx;
		box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;

		.prompt_tit {
			margin: 0 auto;
			margin-top: 40rpx;
			width: 540rpx;
			height: 450rpx;
			font-size: 30rpx;
			color: #CFD1D3;
			text-align: left;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			// -webkit-line-clamp: 2;
			overflow: hidden;
			// 更多内容显示滚动
			overflow-y: auto;
		}
	}
	.btn{
		width: 690rpx;
		height: 80rpx;
		box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 0 auto;
		margin-top: 50rpx;
		text-align: center;
		font-weight: 500;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 80rpx;
	}
</style>